<template>
  <el-tabs type="border-card">
    <el-tab-pane label="发布审核">
      <div class="box">
        <div class="top">
          <el-select v-model="value" placeholder="发布类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              @click="val"
            />
          </el-select>
          <el-select
            v-model="province"
            placeholder="选择省"
            @change="handleProvinceChange"
          >
            <el-option
              v-for="item in provinces"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="city" placeholder="选择市" @change="handleCityChange">
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="area" placeholder="选择区">
            <el-option
              v-for="item in areas"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <button class="btn">查询</button>
        </div>
        <div class="bottom">
          <div class="btntop">
            <div class="btntop">
              <el-button
                type="primary"
                v-for="(item, index) in showStatusData"
                :key="index"
                @click="showStatus(item)"
                :class="{ active: item === currentStatus1 }"
              >
                {{ item }}</el-button
              >
            </div>
          </div>
          <div class="btncenter">
            <el-table :data="filteredData" style="width: 100%">
              <el-table-column prop="id" label="序号" width="50" />
              <el-table-column prop="name" label="用户名" width="80" />
              <el-table-column prop="phone" label="手机号" width="120" />
              <el-table-column prop="county" label="小区名称" width="100" />
              <el-table-column prop="address" label="地址" width="150">
                <template #default="city">
                  {{ city.row.province }} {{ city.row.city }}
                </template>
              </el-table-column>
              <el-table-column prop="area" label="面积" width="100" />
              <el-table-column prop="image" label="房产证图片" width="100">
                <template #default="img">
                  <img :src="img.row.image" alt="" />
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态" width="100" />
              <el-table-column prop="type" label="发布类型" width="100" />
              <el-table-column label="审核">
                <template #default="{ row }">
                  <span v-if="row.state === '未审核'">
                    <el-button type="primary" @click="passAudit(row)">审核通过</el-button>
                    <el-button type="primary" @click="rejectAudit(row)"
                      >审核未通过</el-button
                    >
                    <el-button type="primary" @click="detail(row)">详情</el-button>
                  </span>
                  <span v-else>
                    <el-button type="primary" @click="detail(row)">详情</el-button>
                  </span>
                </template>
              </el-table-column>
            </el-table>

            <el-dialog
              v-model="centerDialogVisible"
              title="审核未通过原因"
              width="30%"
              align-center
            >
              <span>
                <el-input
                  v-model="textarea1"
                  autosize
                  type="textarea"
                  placeholder="审核未通过原因"
                />
              </span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="centerDialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="() => queren(row)"> 确认 </el-button>
                </span>
              </template>
            </el-dialog>
            <el-pagination
              v-model:current-page="currentPage4"
              v-model:page-size="pageSize4"
              :page-sizes="[5, 10, 15, 20]"
              :small="small"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData1.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="求租求购审核">
      <Qz />
    </el-tab-pane>
  </el-tabs>
</template>
<script lang="ts" setup>
import Qz from "./Qz.vue";
import { ref, reactive, onMounted, computed } from "vue";
import { GET_SHENHE } from "../api/api.js";

const currentStatus1 = ref("");
onMounted(() => {
  // fetchData();
});
const showStatusData = ["未审核", "审核通过", "审核未通过"];
const currentStatus = ref("");
let tableData = ref([]);
let tableData1 = ref([]);
const value = ref("");
const province = ref("");
const city = ref("");
const area = ref("");
const textarea1 = ref("");
const centerDialogVisible = ref(false);
const currentPage4 = ref(1);
const selectedRow = ref(null);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

// const Datavalue = ref([]);
// const Datavalue1 = ref(tableData.value);
// const Datavalue2 = ref(tableData.value);
// const val = () => {
//   if (value.value === "我想找个房") {
//     console.log("我想找个房");

//     Datavalue.value = Datavalue2.value.filter(
//       (item: { type: string }) => item.type === value.value
//     );
//     tableData.value = Datavalue.value;
//   } else if(value.value === "二手房出售"){
//     Datavalue.value = Datavalue2.value.filter(
//       (item: { type: string }) => item.type === value.value
//     );
//     tableData.value = Datavalue.value;
//   }  else if(value.value === "有房出租"){
//     Datavalue.value = Datavalue2.value.filter(
//       (item: { type: string }) => item.type === value.value
//     );
//     tableData.value = Datavalue.value;
//   }  else if(value.value === "我想租个房"){
//     Datavalue.value = Datavalue2.value.filter(
//       (item: { type: string }) => item.type === value.value
//     );
//     tableData.value = Datavalue.value;
//   }  else if(value.value === "帮我找房"){
//     Datavalue.value = Datavalue2.value.filter(
//       (item: { type: string }) => item.type === value.value
//     );
//     tableData.value = Datavalue.value;
//   }
// };
const params = ref({
  currentPage: currentPage4,
  pageSize: pageSize4,
});

const handleSizeChange = (pageSize) => {
  params.value.pageSize = pageSize;
  params.value.currentPage = 1;
  getSH();
};
const handleCurrentChange = (currentPage) => {
  params.value.currentPage = currentPage;
  getSH();
};

const getSH = () => {
  const params = {
    currentPage: currentPage4.value,
    pageSize: pageSize4.value,
  };
  console.log(params);

  GET_SHENHE(params)
    .then((res) => {
      console.log(res);
      tableData.value = res.data.data;
    })
    .catch((err) => {});

  
};

onMounted(() => {
  getSH();
  GET_SHENHE()
    .then((res) => {
      console.log(res);
      tableData1.value = res.data.data;
    })
    .catch((err) => {});
});

let filteredData = computed(() => {
  if (currentStatus.value) {
    return tableData.value.filter(
      (item: { state: string }) => item.state === currentStatus.value
    );
  } else {
    return tableData.value;
  }
});

const provinces = [
  { value: "p1", label: "河南" },
  { value: "p2", label: "北京" },
  // 其他省份数据
];

const cities = ref([]);
const areas = ref([]);

const handleProvinceChange = () => {
  // 根据选中的省份获取对应的城市数据，这里假设是根据省份设置的静态数据
  if (province.value === "p1") {
    cities.value = [
      { value: "c11", label: "郑州" },
      { value: "c12", label: "濮阳" },
      // 其他城市数据
    ];
    console.log(cities.value);
  } else if (province.value === "p2") {
    cities.value = [
      { value: "c21", label: "海淀" },
      { value: "c22", label: "顺义" },
      // 其他城市数据
    ];
    console.log(cities.value);
  }
  city.value = ""; // 重置选择的城市
  area.value = ""; // 重置选择的区域
};

const handleCityChange = () => {
  // 根据选中的城市获取对应的区域数据，这里同样假设是根据城市设置的静态数据
  if (city.value === "c11") {
    areas.value = [
      { value: "a111", label: "郑州市" },
      { value: "a112", label: "濮阳市" },
      // 其他区域数据
    ];
  } else if (city.value === "c12") {
    areas.value = [
      { value: "a121", label: "上地市" },
      { value: "a122", label: "顺义市" },
      // 其他区域数据
    ];
  }
  area.value = ""; // 重置选择的区域
};

// 处理当前页变化
// const handleCurrentChange = (val: number) => {
//   // currentPage.value = val;
//   // 重新请求数据
//   // fetchData();
// };
// 请求数据的方法
// const fetchData = () => {
//   const start = (currentPage.value - 1) * pageSize.value;
//   const end = start + pageSize.value;
//   tableData.value = tableData.value.slice(start, end);
// };

const options = [
  {
    value: "二手房出售",
    label: "二手房出售",
  },
  {
    value: "有房出租",
    label: "有房出租",
  },
  {
    value: "我想找个房",
    label: "我想找个房",
  },
  {
    value: "我想租个房",
    label: "我想租个房",
  },
  {
    value: "帮我找房",
    label: "帮我找房",
  },
];

const showStatus = (state: string) => {
  currentStatus.value = state;
  currentStatus1.value = state;
  // 生成新数组
  console.log(state);
};

// 审核通过
const passAudit = (row: { Audit: string; state: string }) => {
  row.Audit = "审核通过";
  console.log(row.state);
  row.state = "审核通过";
};

// 审核未通过
const rejectAudit = (row: { Audit: string; state: any }) => {
  row.Audit = "审核未通过";
  console.log(row.state);
  // centerDialogVisible.value = true;
  row.state = "审核未通过";
};
//审核未通过确认
const queren = (row: any) => {
  // row.status = "审核未通过";
  // console.log(textarea1.value);
  // centerDialogVisible.value = false;
  console.log(selectedRow.value);

  if (selectedRow.value) {
    // selectedRow.value.state = "审核未通过";
    centerDialogVisible.value = false;
  }
};

const detail = (row: { Audit: string }) => {
  row.Audit = "详情";
  console.log(row);
};
</script>
<style scoped lang="scss">
.btn {
  width: 100px;
  height: 2rem;
  background: #169bd5;
  border: 0px;
  color: #fff;
}

.box {
  width: 100%;
  height: 100%;
}

.top {
  width: 100%;
  height: 3rem;
}
.bottom {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  .btntop {
    width: 100%;
    height: 2rem;
  }
  .btncenter {
    width: 100%;
    flex: 1;
  }
  button {
    width: 100px;
    height: 2rem;
  }
}

.active {
  background: #ccc;
  border: 0px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
